<template>
  <el-card shadow="hover" class="current-group">
   <div class="header">
      <span class="title">当前标组</span>
      <el-tooltip placement="bottom">
        <template #content>
          <div style="width: 200px">
            如果用户没有命中竞标关键字，可以点击『得标』，确认该用户也是得标者。已得标的用户，也可以手动
            『取消得标』。
          </div>
        </template>
        <el-icon :size="16" color="#58919f" style="vertical-align: middle"
          ><InfoFilled
        /></el-icon>
      </el-tooltip>
    </div>
    <el-scrollbar class="scroll p-15">
      <div class="current-wrap">
      <div class="flex justify-between py">
        <span class="tit">标组名称</span>
        <span class="desc">03</span>
      </div>
     <div class="flex py">
        <span class="tit">关键字</span>
        <span class="desc">03</span>
      </div>
     <div class="flex py">
        <span class="tit">标组金额</span>
        <span class="desc">RM500</span>
      </div>
      <div class="flex py">
        <span class="tit">标组内容</span>
        <span class="desc">牙刷棒牙刷棒牙刷棒牙刷棒牙刷棒牙刷棒牙</span>
      </div>
      <div class="flex py">
        <span class="tit">直播类型</span>
        <span class="desc">普通直播</span>
      </div>
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="flex justify-between">
        <el-button type="primary" plain>竞标开始</el-button>
        <el-button type="danger" plain>竞标结束</el-button>
      </div>
    </template>
  </el-card>
  <el-card shadow="hover" class="current-win mt-15">
     <div class="header">
      <span class="title">得标者名单</span>
      <el-tooltip placement="bottom">
        <template #content>
          <div style="width: 200px">
            如果用户没有命中竞标关键字，可以点击『得标』，确认该用户也是得标者。已得标的用户，也可以手动
            『取消得标』。
          </div>
        </template>
        <el-icon :size="16" color="#58919f" style="vertical-align: middle"
          ><InfoFilled
        /></el-icon>
      </el-tooltip>
    </div>
    
      <el-row :gutter="10">
    <el-col :span="15">
    <el-scrollbar class="win-scroll">
      <ul class="p-15">
        <li class="flex flex-column mt"><span class="name text-ellipsis">littlewhite7777littlewhite77777littlewhite77777littlewhite777777</span><span class="key font-content-color">Aj4wt <i class="plus">+2</i></span></li>
      </ul>
      </el-scrollbar>
    </el-col>
    <el-col :span="9" class="current-win-count">
    <div class="p-15">
     <div class="my-15 flex align-center flex-column">
       <span class="name">得标数量</span>
       <span class="win-num">11200</span></div>
     <div class="my-15 flex align-center flex-column">
       <span class="name">库存数量</span>
       <span class="stock-num">8400</span></div>
      </div>
    </el-col>
  </el-row>
    
   
    <template #footer>
      <el-checkbox v-model="isMsg">留言公布得标结果</el-checkbox>
    </template>
  </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, inject } from "vue";
import {
  InfoFilled
} from "@element-plus/icons-vue";
const props = defineProps({
   data:{
    type:Object,
    default:{}
  },
  groupData:{
    type:Object,
    default:{}
  }
});

const isMsg=ref(true);
const live_id = inject('liveId');
const live_type = inject('liveType');

</script>
<style>
.current-group {
  .el-card__body {
    padding: 0px;
  }
  .el-card__footer {
    padding: 10px 15px;
  }
}
.current-win {
  .el-card__body {
    padding: 0px;
  }
  .el-card__footer {
    padding: 5px 15px;
  }
}
</style>
<style scoped lang="scss">
.current-group,.current-win {
  .header {
    padding:10px 15px 10px 15px;
    background: rgb(236, 239, 245);
  }
  .title{
    vertical-align: middle;
    margin-right: 4px;
    font-weight: 600;
    font-size:14px;
    color:#606266;
  }
  .scroll{
    height:121px;
  }
  .current-wrap{
    font-size:12px;
    .tit{
      margin-right:8px;
      min-width:80px;
      
    }
    .desc{
      font-weight:600;
      flex: 1;
    }
  }
}
.win-scroll{
   height:151px;
   .name{
     color: var(--el-color-primary-dark-2);
     font-size:13px;
   }
   .key{
     color: #606266;
     font-size:12px;
   }
   .plus{
    font-style:normal;
    font-weight:600;
   }

}
.current-win-count{
 
	box-shadow: -13px 0 13px -12px #ddd; 
  .win-num{
    color: var(--el-color-primary);
    font-weight:600;
    font-size:20px;
  }
  .stock-num{
    color: var(--el-color-info);
    font-weight:600;
    font-size:20px;
  }
  .name{
    font-size:12px;
    padding-bottom:3px;
    color:#606266;
  }
}
.ec2-btncon {
  display: flex;
  flex-direction: column;
}
.primaryColor {
  color: var(--el-color-primary);
}
</style>
